<template>
  <div class="container" v-loading="loading" element-loading-text="加载中">
    <div class="box">
      <div class="title">基本信息</div>
      <div class="content">
        <div class="title-name">{{baseForm.supplierName}}</div>
        <div class="flex">
          <el-form ref="baseForm" :model="baseForm" label-width="120px">
            <el-form-item label="操作员姓名：">
              <span>{{baseForm.realName}}</span>
            </el-form-item>
            <el-form-item label="登录手机号：">
              <span>{{baseForm.phone}}</span>
            </el-form-item>
            <el-form-item label="地址：">
              <el-select class="width-150" v-model="baseForm.contactProvinceCode" placeholder="请选择省份" clearable @change="changeCity(baseForm.contactProvinceCode)">
                <el-option v-for="item in provinceList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
                </el-option>
              </el-select>
              <el-select class="width-150" v-model="baseForm.contactCityCode" placeholder="请选择城市" clearable @change="changeDistrict(baseForm.contactCityCode)">
                <el-option v-for="item in cityList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
                </el-option>
              </el-select>
              <el-select class="width-150" v-model="baseForm.contactDistrictCode" placeholder="请选择区县" clearable>
                <el-option v-for="item in districtList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
                </el-option>
              </el-select>
              <el-input class="mar-t-10 w460" placeholder="请录入详细地址" v-model="baseForm.contactAddress"></el-input>
            </el-form-item>
            <el-form-item label="联系人：">
              <el-input v-model="baseForm.contact" class="w460"></el-input>
            </el-form-item>
            <el-form-item label="联系电话：">
              <el-input v-model="baseForm.contactPhone" class="w460"></el-input>
            </el-form-item>
          </el-form>

          <div class="divider-line"></div>

          <el-form ref="baseForm" :model="baseForm" label-width="140px">
            <div class="btn-area">
              <el-button type="text" class="b-l" @click="doCopyAddress">复制联系地址</el-button>
              <el-button type="primary" @click="doSaveBaseInfo">保存地址信息</el-button>
            </div>
            <el-form-item label="退货地址：">
              <el-select class="width-150" v-model="baseForm.refundProvinceCode" placeholder="请选择省份" clearable @change="changeRefundCity(baseForm.refundProvinceCode)">
                <el-option v-for="item in refundProvinceList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
                </el-option>
              </el-select>
              <el-select class="width-150" v-model="baseForm.refundCityCode" placeholder="请选择城市" clearable @change="changeRefundDistrict(baseForm.refundCityCode)">
                <el-option v-for="item in refundCityList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
                </el-option>
              </el-select>
              <el-select class="width-150" v-model="baseForm.refundDistrictCode" placeholder="请选择区县" clearable>
                <el-option v-for="item in refundDistrictList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
                </el-option>
              </el-select>
              <el-input class="mar-t-10 w460" placeholder="请录入详细地址" v-model="baseForm.refundAddress"></el-input>
            </el-form-item>
            <el-form-item label="寄件人：">
              <el-input v-model="baseForm.sender" class="w460"></el-input>
            </el-form-item>
            <el-form-item label="寄件人电话：">
              <el-input v-model="baseForm.senderPhone" class="w460"></el-input>
            </el-form-item>
            <el-form-item label="退货收件人：">
              <el-input v-model="baseForm.refundReceiver" class="w460"></el-input>
            </el-form-item>
            <el-form-item label="退货联系电话：">
              <el-input v-model="baseForm.refundReceiverPhone" class="w460"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <div class="box">
      <div class="title">管理参数</div>
      <div class="content">
        <el-form ref="manageForm" :model="manageForm" inline label-width="120px">
          <el-form-item label="结算类型：" class="w-p-48">
            <span>{{ dict.settlementType[manageForm.settlementType] }}</span>
          </el-form-item>
          <el-form-item label="结算扣率：" class="w-p-48">
            <span>{{ manageForm.settlementRate }}%</span>
          </el-form-item>
          <el-form-item label="分账账号：" class="w-p-48" v-if="manageForm.settlementMethod == 20">
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="box">
      <div class="title">资质材料</div>
      <div class="content">
        <div class="sub-title">
          <span> 资质材料审核结果：</span>
          <span :class="resultColor">{{statusLabel[qualificationForm.approveStatus]}}</span>
        </div>
        <el-form ref="qualificationForm" :model="qualificationForm" label-width="120px">
          <el-form-item label="开户名称：">
            <el-input v-model="qualificationForm.bankName" class="w460" :disabled="!editEnable"></el-input>
          </el-form-item>
          <el-form-item label="开户银行：">
             <el-input v-model="qualificationForm.bankCardNo" class="w460" :disabled="!editEnable"></el-input>
          </el-form-item>
          <el-form-item label="开户银行账号：">
            <el-input v-model="qualificationForm.bankAccountName" class="w460" :disabled="!editEnable"></el-input>
          </el-form-item>
          <el-form-item label="营业执照：">
            <el-upload list-type="picture-card" action="/api/common/uploadFiles" name="files" :data="token" :show-file-list="false"
              :before-upload="beforeUpload" :on-success="uploadLicenseSuccess">
              <img v-if="qualificationForm.businessLicenseUrl" :src="qualificationForm.businessLicenseUrl" style="width: 150px;height: 150px" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="其他资质材料：">
            <div v-if="editEnable">
              <el-upload list-type="picture-card" action="/api/common/uploadFiles" name="files" :data="token" :limit='5' :file-list="imageFileList"
                :on-exceed="handleExceed" :on-remove="handleRemove" :before-upload="beforeUpload" :on-success="uploadOtherSuccess">
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
            <div v-else>
              <img v-for="(item, key) in qualificationForm.otherImageList" :key="key" :src="item" style="width: 150px;height: 150px;margin-right: 10px" />
            </div>
          </el-form-item>
          <div class="pad-l-30 pad-b-20">
            <el-button type="primary" @click="doSaveQualification()" v-if="editEnable">提交资质材料</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { getDictByGroupName } from '@/api/common/common'
import { listProvince, listCity, listDistrict } from '@/api/area/area'
import { getVillageSupplier, saveSupplier, saveSupplierQualification } from '@/api/user/supplier'

export default {
  data() {
    return {
      // 基本信息表单
      baseForm: {
        supplierId: '',
        supplierName: '',
        realName: '',
        phone: '',
        contactProvinceCode: '',
        contactCityCode: '',
        contactDistrictCode: '',
        contactAddress: '',
        contact: '',
        contactPhone: '',
        refundProvinceCode: '',
        refundCityCode: '',
        refundDistrictCode: '',
        refundAddress: '',
        refundReceiver: '',
        refundReceiverPhone: '',
        sender: '',
        senderPhone: ''
      },
      // 管理参数表单
      manageForm: {
        settlementType: '',
        settlementRate: 0,
        settlementMethod: ''
      },
      // 资质表单
      qualificationForm: {
        approveStatus: '',
        bankName: '',
        bankCardNo: '',
        bankAccountName: '',
        businessLicenseUrl: '',
        otherImageList: []
      },
      statusLabel: {
        10: '待提交',
        20: '待审核',
        30: '已通过',
        90: '未通过'
      },
      // 数据字典
      dict: {
        settlementType: {}
      },
      token: '',
      // 状态颜色
      resultColor: '',
      // 其他资质图片列表
      imageFileList: [],
      provinceList: [],
      cityList: [],
      districtList: [],
      refundProvinceList: [],
      refundCityList: [],
      refundDistrictList: [],
      loading: false,
      editEnable: false
    }
  },
  // 初始化页面
  created() {
    this.token = { accessToken: getToken() }
    listProvince().then(response => {
      this.provinceList = response.data
      this.refundProvinceList = response.data
    })
    // 获取数据字典
    getDictByGroupName('VillageSupplierDTO').then(response => {
      Object.assign(this.dict, response.data)
    })
    this.initDataInfo()
  },
  methods: {
    // 初始数据
    initDataInfo() {
      this.loading = true
      getVillageSupplier(this.getSupplierId()).then(response => {
        if (response.isError) return
        Object.assign(this.baseForm, response.data)
        Object.assign(this.manageForm, response.data)
        Object.assign(this.qualificationForm, response.data)
        this.editEnable = this.qualificationForm.approveStatus === 10 || this.qualificationForm.approveStatus === 90
        this.changeCity(this.baseForm.contactProvinceCode, this.baseForm.contactCityCode, this.baseForm.contactDistrictCode)
        if (this.baseForm.refundProvinceCode) this.changeRefundCity(this.baseForm.refundProvinceCode, this.baseForm.refundCityCode, this.baseForm.refundDistrictCode)
        this.setColor()
        this.qualificationForm.otherImageList.forEach(i => {
          const file = { url: i }
          this.imageFileList.push(file)
        })
      })
    },
    // 设置颜色
    setColor() {
      if (this.qualificationForm.approveStatus === 90) this.resultColor = 'font-red'
      else if (this.qualificationForm.approveStatus === 30) this.resultColor = 'font-green'
      else this.resultColor = ''
    },
    // 获取联系地址-市
    changeCity(provinceCode, cityCode, districtCode) {
      this.cityList = []
      this.districtList = []
      this.baseForm.contactCityCode = ''
      this.baseForm.contactDistrictCode = ''
      if (provinceCode) {
        listCity(provinceCode).then(response => {
          this.cityList = response.data
        })
        this.baseForm.contactCityCode = cityCode
        this.changeDistrict(cityCode, districtCode)
      } else {
        this.loading = false
      }
    },
    // 获取联系地址-区
    changeDistrict(cityCode, districtCode) {
      this.districtList = []
      this.baseForm.contactDistrictCode = ''
      if (cityCode) {
        listDistrict(cityCode).then(response => {
          this.districtList = response.data
          this.loading = false
        })
        this.baseForm.contactDistrictCode = districtCode
      } else {
        this.loading = false
      }
    },
    // 获取退货地址-市
    changeRefundCity(provinceCode, cityCode, districtCode) {
      this.refundCityList = []
      this.refundDistrictList = []
      this.baseForm.refundCityCode = ''
      this.baseForm.refundDistrictCode = ''
      if (provinceCode) {
        listCity(provinceCode).then(response => {
          this.refundCityList = response.data
        })
        this.baseForm.refundCityCode = cityCode
        this.changeRefundDistrict(cityCode, districtCode)
      } else {
        this.loading = false
      }
    },
    // 获取退货地址-区
    changeRefundDistrict(cityCode, districtCode) {
      this.refundDistrictList = []
      this.baseForm.refundDistrictCode = ''
      if (cityCode) {
        listDistrict(cityCode).then(response => {
          this.refundDistrictList = response.data
          this.loading = false
        })
        this.baseForm.refundDistrictCode = districtCode
      } else {
        this.loading = false
      }
    },
    // 上传前事件
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isGIF = file.type === 'image/gif'
      const isPNG = file.type === 'image/png'
      const isBMP = file.type === 'image/bmp'
      if (!isJPG && !isGIF && !isPNG && !isBMP) {
        this.$message({ type: 'error', message: '上传图片必须是JPG/GIF/PNG/BMP 格式!' })
      }
      return (isJPG || isBMP || isGIF || isPNG)
    },
    // 执照上传成功后事件
    uploadLicenseSuccess(res, file) {
      if (res.code === 101) {
        this.qualificationForm.businessLicenseUrl = res.data[0]
      } else {
        this.$message({ type: 'error', message: res.msg })
      }
    },
    // 其他资质上传成功后事件
    uploadOtherSuccess(res, file) {
      if (res.code === 101) {
        this.qualificationForm.otherImageList.push(res.data[0])
      } else {
        this.$message({ type: 'error', message: res.msg })
      }
    },
    // 超出事件
    handleExceed(file, fileList) {
      this.$message({ type: 'warning', message: '最多可上传5张' })
    },
    // 移除事件
    handleRemove(file, fileList) {
      const removeFile = file.response ? file.response.data[0] : file.url
      this.qualificationForm.otherImageList = this.qualificationForm.otherImageList.filter(image => {
        return image !== removeFile
      })
    },
    // 复制事件
    doCopyAddress() {
      this.loading = true
      this.baseForm.refundProvinceCode = this.baseForm.contactProvinceCode
      this.changeRefundCity(this.baseForm.contactProvinceCode, this.baseForm.contactCityCode, this.baseForm.contactDistrictCode)
      this.baseForm.refundAddress = this.baseForm.contactAddress
      this.baseForm.refundReceiver = this.baseForm.contact
      this.baseForm.refundReceiverPhone = this.baseForm.contactPhone
    },
    // 保存基本信息事件
    doSaveBaseInfo() {
      this.loading = true
      saveSupplier(this.baseForm).then(response => {
        if (response.isError) return
        this.$message({ type: 'success', message: '保存成功!' })
        this.initDataInfo()
      })
    },
    // 保存资质信息事件
    doSaveQualification() {
      this.loading = true
      saveSupplierQualification(this.qualificationForm).then(response => {
        if (response.isError) return
        this.$message({ type: 'success', message: '保存成功!' })
        this.initDataInfo()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  background: rgb(248, 249, 251);
  min-height: calc(100vh - 105px);
  padding: 0 30px 20px 30px;
}
.title-name {
  margin-left: 20px;
  font-size: 36px;
  margin-bottom: 30px;
}
.sub-title {
  margin-left: 20px;
  font-size: 24px;
  margin-bottom: 30px;
}
.box {
  .title {
    font-size: 20px;
    padding: 15px 0;
  }
  .content {
    background: white;
    padding: 20px 0 10px 0;
    .btn-area {
      margin: 36px 0 40px 0;
      .b-l {
        margin-left: 40px;
        margin-right: 320px;
        font-size: 16px;
      }
    }
  }
}
.divider-line {
  width: 5px;
  background: rgb(228, 228, 228);
}
.w460 {
  width: 460px;
}
.w-p-48 {
  width: 48%;
}
</style>